<!-- 个人认为本页面 学到的是内容是用列表的status来控制全选以及价格综合 -->
<template>
	<div class="cartList">
		<div class="clHeader">
			<h3>购物车</h3>
			<a href="javascript:void(0);">编辑</a>
		</div>
		<div class="coupon">
			<p>全场满99元包邮，还差99元包邮</p>
			<span>优惠券 > </span>
		</div>
		<!-- 列表 -->
		<div class="cratListAll">
			<!-- <div class="clItem">
				<i class="iconfont" :class="[ iconNum === 1 ? 'icon-xuanze-h' : 'icon-yuan']" @click="chooseClass(1)"></i>
				<img src="http://www.xiaosaonian.cn/img/thu_5c21959ac896a.jpg" alt="">
				<div class="listName">
					<h4>加利利橄榄油礼盒</h4>
					<p>500ml*2</p>
					<span>￥158</span>
				</div>
				<div class="num">
					<span>-</span>
					<strong>1</strong>
					<span>+</span>
				</div>
			</div> -->
			<div class="clItem" :class="ClItemIndex === index ? 'active' : '' " v-for="(item,index) in list" :key="index" @touchstart="listTouchStart($event,index)" @touchmove="listTouchMove($event,index)">
				<!-- <input type="checkbox" value="aaa" v-model="checkedNames" @click="chooseClass()"> -->
				<i class="iconfont" :class="[ item.isTrue ? 'icon-yuan' : 'icon-xuanze-h']"
					@click="chooseClass(item.isTrue,index)"></i>
				<img :src="item.imgUrl" alt="">
				<div class="listName">
					<h4>{{item.name}}</h4>
					<p>500ml*2</p>
					<span>￥{{item.price}}</span>
				</div>
				<div class="num">
					<span @click="minusNum(item.number,index)">-</span>
					<strong>{{item.number}}</strong>
					<span @click="addNum(item.number,index)">+</span>
				</div>
				<a href="javascript:void(0);" class="del" @click="listDel(index)">删除</a>
			</div>
		</div>
		<!-- 购物车如果为空显示 -->
		<div class="cartNone" v-if="!cartStatus">
			<i class="iconfont icon-gouwuche"></i>
			<p>您的购物车还是空的哦~~</p>
			<router-link :to="{path:'/more', query:{listId:1}}" class="goMore">去逛逛</router-link>
		</div>
		<!-- 计算总和 -->
		<div class="sum" v-if="cartStatus">
			<div class="sLeft">
				<div class="slLeft">
					<!-- <i v-if="IconClass" class="iconfont icon-yuan"></i>
					<i v-else class="iconfont icon-xuanze-h"></i> -->
					<i class="iconfont" :class="IconClass ? 'icon-yuan' : 'icon-xuanze-h'" @click="allChoose"></i>
					<span>全選</span>
				</div>
				<div class="slRight">
					<p>合計：<span>￥{{sum}}</span></p>
					<p class="desc">(满99元免运费)</p>
				</div>
			</div>
			<div class="sRight">
				<router-link to="/" :class="sumClassActive ? 'active' : '' ">结算</router-link>
			</div>
		</div>
		<Nav></Nav>
	</div>
</template>

<script>
import Nav from '../nav/nav'
import {
  print
} from 'util'
export default {
  name: 'cartlist',
  components: {
    Nav
  },
  data () {
    return {
      IconClass: true,
      iconNum: '',
      act: 1,
      sum: 0,
      allChecked: 0,
      cartStatus: false,
      list: [
        // {
        // 	isTrue: true,
        // 	imgUrl: 'http://www.xiaosaonian.cn/img/thu_5c21959ac896a.jpg',
        //   number: 1,
        //   price: 3.6,
        //   name: '加利利橄榄油礼盒'
        // },
      ],
      sumClassActive: false,
      touchX: 0,
      ClItemIndex: ''
    }
  },
  // computed: {
  // 	cartNone: function () {
  // 		/*
  // 				**********************************************
  // 				var cartStatus = this.$store.state.cartStatus;
  // 				如果刷新当前页面 vuex会重置 所以我这里没有用store 只是测试一下

  // 				*/

  // 		var cartStatus = localStorage.getItem('cartStatus')

  // 		/* 由于 ‘false’ 字符串 也是true 所以转换一下  */
  // 		if (cartStatus === 'false') {
  // 			return cartStatus = false
  // 		}

  // 		return cartStatus
  // 	}
  // },
  mounted () {
    this.getLocalStorage()
    this.getCartStatus()
  },
  methods: {
    /*
		**********************************************
		var cartStatus = this.$store.state.cartStatus;
		如果刷新当前页面 vuex会重置 所以我这里没有用store 只是测试一下

		*/
    getCartStatus: function () {
      var cartStatus = localStorage.getItem('cartStatus')
      if (cartStatus === 'false') {
        cartStatus = false
      }
      this.cartStatus = cartStatus
      console.log(this.cartStatus)
    },
    getLocalStorage: function () {
      var data = localStorage.getItem('item')
      console.log(data)
      if (data) {
        var arr = JSON.parse(data)
      	this.list = arr
      }

      // console.log(typeof (data), this.list[0].id, this.list)
    },
    chooseClass: function (e, index) {
      // e = !e;
      /** 由于没有后台 只能用计数器临时存一下选中的list */
      if (e) {
        this.list[index].isTrue = !e
        /* 获取当前的数量以及金钱 选中状态计算价格*数数量 */
        var num = this.list[index].number
        var price = this.list[index].price
        this.sum += price * num
        this.sum = Number(this.sum.toFixed(2))
        e = false
        /** 判断选中最后一个list 全选按钮勾上 */
        this.allChecked += 1
        console.log(this.allChecked, this.list.length)
        if (this.allChecked === this.list.length) {
          this.IconClass = false
        }

        /* 点亮结算按钮 */
        this.sumClassActive = true
      } else {
        this.list[index].isTrue = !e
        /* 获取当前的数量以及金钱 不选中状态 总价去掉当前不选中的价格 */
        var num = this.list[index].number
        var price = this.list[index].price
        this.sum -= price * num
        this.sum = Number(this.sum.toFixed(2))
        e = true
        this.allChecked -= 1
        if (this.allChecked === 0) {
          this.sumClassActive = false
        }
        this.IconClass = true
      }
    },
    addNum: function (n, index) {
      var num = Number(n)
      // num++;/* += 优先级大于=  ++ 的优先级小于 = */
      this.list[index].number = num += 1
      /* 获取当前的数量以及金钱  因为默认是true 所以要判断false的时候（也就是选中的时候）才算总价 */
      if (!this.list[index].isTrue) {
        var price = this.list[index].price
        this.sum += price
        this.sum = Number(this.sum.toFixed(2))
      }
    },
    minusNum: function (n, index) {
      var num = Number(n)
      if (num !== 1) {
        this.list[index].number = num -= 1
        /* 获取当前的数量以及金钱 因为默认是true 所以要判断false的时候（也就是选中的时候）才算总价 */
        if (!this.list[index].isTrue) {
          var price = this.list[index].price
          this.sum -= price
          this.sum = Number(this.sum.toFixed(2))
        }
      }
    },
    allChoose: function () {
      // this.IconClass = !this.IconClass

      if (this.IconClass) {
        /** 全选 */
        for (var i = 0; i < this.list.length; i++) {
          this.list[i].isTrue = false
          var num = this.list[i].number
          var price = this.list[i].price * num
          this.sum += price
        }
        this.sum = Number(this.sum.toFixed(2))
        this.IconClass = false
        this.sumClassActive = true
      } else {
        /** 全不选 */
        for (var i = 0; i < this.list.length; i++) {
          this.list[i].isTrue = true
          var num = this.list[i].number
          var price = this.list[i].price * num
          this.sum -= price
        }
        this.sum = Number(this.sum.toFixed(2))
        this.IconClass = true
        this.sumClassActive = false
      }
    },
    /** touch事件 */
    listTouchStart: function (event, index) {
      this.touchX = event.touches[0].pageX
    },
    listTouchMove: function (event, index) {
      var pageX = event.touches[0].pageX
      if (Number(this.touchX) - Number(pageX) > 20) {
        this.ClItemIndex = index
      } else {
        this.ClItemIndex = -1
      }
    },
    /** 删除购物清单 */
    listDel: function (index) {
      this.list.splice(index, 1)
      localStorage.setItem('item', JSON.stringify(this.list))
			var ssNum = sessionStorage.getItem('cartNum')
			console.log(ssNum)
      ssNum -= 1
			sessionStorage.setItem('cartNum', ssNum)
			this.$store.commit('addCratNum', ssNum)
			console.log(this.$store.state.cartNum);
      this.ClItemIndex = -1
      if (this.list.length === 0) {
        localStorage.setItem('cartStatus', false)
        this.cartStatus
        sessionStorage.setItem('cartNum', 0)
        this.getCartStatus()
      }
    }
  }
}

</script>

<style scoped>
	i.icon-xuanze-h {
		color: #ff7117;
	}

	.cratListAll {
		width: 100%;
		overflow: hidden;
	}

	.clItem {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		border-bottom: 1px solid #ccc;
		padding: .36rem 0;
		position: relative;
		transition: all .5s linear;
	}
	.clItem.active{
		transform: translateX(-1.2rem);
	}

	.clItem i {
		font-size: .32rem;
		display: block;
		margin-left: .32rem;
		margin-right: .32rem;
	}

	.clItem img {
		width: 1.6rem;
		height: 1.6rem;
	}

	.clItem .listName {
		display: flex;
		flex-direction: column;
		margin-left: .32rem;
		margin-right: .32rem;
		width: 2.5rem;
	}

	.clItem .listName h4 {
		font-size: .3rem;
	}

	.clItem .listName p {
		font-size: .26rem;
		margin-top: .2rem;
		color: #828282;
	}

	.clItem .listName span {
		font-size: .34rem;
		color: salmon
	}

	.clItem .num {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		height: 1.5rem;
		margin-right: .32rem;
	}

	.clItem .num span {
		display: inline-block;
		width: 0.44rem;
		height: 0.44rem;
		border-radius: 0.06rem;
		border: 1px solid #FF712B;
		color: #FF712B;
		font-size: 0.28rem;
		text-align: center;
		line-height: 0.46rem;
	}

	.clItem .num strong {
		font-size: .34rem;
		padding: 0 .2rem;
		display: block;
		text-align: center;
	}

	.cartList {
		width: 100%;
		position: absolute;
		height: 100%;
		top: 0;
		bottom: 0;
		background-color: #eee;
	}

	.clHeader {
		width: 100%;
		height: .96rem;
		text-align: center;
		position: relative;
		line-height: .96rem;
		color: #303030;
		border-bottom: 1px solid #ccc;
		background-color: #fff;
	}

	.clHeader h3 {
		font-size: .36rem;
	}

	.clHeader a {
		font-size: .28rem;
		position: absolute;
		right: .32rem;
		top: 0rem;
	}

	.coupon {
		background-color: #fff9eb;
		height: .96rem;
		line-height: .96rem;
		font-size: .28rem;
		display: flex;
		justify-content: space-between;
		padding: 0 .32rem;
		border-bottom: 1px solid #ccc;
	}

	.coupon span {
		color: #ff7117;
	}

	.cartNone {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding: 3rem 0;
	}

	.cartNone i {
		font-size: 1.9rem;
		color: #ddd;
	}

	.cartNone p {
		font-size: 0.28rem;
		color: #303030;
		margin: .5rem 0;
	}

	.cartNone a {
		font-weight: normal;
		width: 2.22rem;
		height: 0.8rem;
		background: #FF712B;
		border: 1px solid #ff712b;
		color: #fff;
		line-height: 0.8rem;
		font-size: 0.36rem;
		border-radius: 0.1rem;
		text-align: center;
	}

	.sum {
		position: fixed;
		bottom: 1.2rem;
		border-top: 1px solid #ccc;
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		justify-content: space-between;
		background-color: #fef7ec;
	}

	.sLeft {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: .32rem;
	}

	.slLeft {
		display: flex;
		flex-direction: row;
		margin-right: 1rem;
	}

	.slLeft span {
		font-size: 0.26rem;
		color: #434343;
		display: block;
		margin-left: .2rem
	}

	.slRight {
		display: flex;
		flex-direction: column;
	}

	.slRight p {
		font-size: .26rem;
	}

	.slLeft i {
		font-size: .32rem;
	}

	.slRight p span {
		color: #FF712B;
		font-size: 0.2rem;
	}

	p.desc {
		color: #a5a5a5;
	}

	.sRight a {
		width: 2.1rem;
		height: 1rem;
		background: #c4c4c4;
		text-align: center;
		line-height: 1rem;
		color: #fff;
		font-size: 0.32rem;
		display: block;
	}

	.sRight a.active {
		background: rgb(255, 113, 43);
	}
	.del{
		font-size: 0.24rem;
		text-align: center;
		line-height: 2.35rem;
		width: 1.2rem;
		background: #FF712B;
		color: #fff;
		text-align: center;
		position: absolute;
		right: -1.2rem;
		top: 0;
		z-index: 2;
	}
</style>
